import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import '@/styles/common.scss'
import { useIntersectionObserver } from '@vueuse/core'

const app = createApp(App)


app.use(router)
app.mount('#app')
app.use(createPinia())
app.directive('img-lazy',{
    mounted(el,binding){
    // el:指令绑定的元素 img
    // binding：binding.value 指令等于号后面绑定的表达式的值
        console.log(el,binding)
        useIntersectionObserver(
            el,
            ([{ isIntersecting }]) => {
                if(isIntersecting == true){
                    el.src = binding.value
                }
              
            },
          )
    }
   

    
})